@import "~styles/config.scss";

.container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(https://sf3-ttcdn-tos.pstatp.com/obj/cc-static/1602680060391.jpg);
  background-size: 100% auto;
  animation: login-full-bg-data 150s cubic-bezier(0.21, 0.07, 0.88, 1.02)
    infinite;

  .logo {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;
    height: 30px;
    cursor: pointer;
    // filter: grayscale(1) brightness(1000%);
    img {
      height: 100%;
    }
  }

  .box {
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 25%;
    transform: translate(0, -50%);
    width: 400px;
    background: #fff;
    padding: 40px;
    .welcome {
      font-weight: bold;
      font-size: 22px;
    }

    
    .title {
        margin-top: 10px;
        color:$--color-text-secondary;
      }
    .form {
      margin-top: 15px;
      width: 100%;
      position: relative;
      z-index: 1;

      //background-color: hsla(0,0%,96%,.88);
    }

    .wrap {
      border-radius: 10px;
      // padding      : 10px 15px;

      // height: 350px;
    }

    .sub {
      padding: 10px 0px;
      .forget {
        color: $--color-primary;
        text-align: right;
        font-size: 12px;
      }
      ::v-deep .el-input__inner {
        height: 42px;
      }
    }
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba($color: #000000, $alpha: 0.6);
  }
  .beian{
    position: fixed;
    bottom:0px; left:0px; width:100%;
    color:#fff;
    font-size: 12px;
    text-align: center;
    line-height:50px;
    z-index: 2;
}
}

@keyframes login-full-bg-data {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 -107.7455vw;
  }
}

// .container {
//     width   : 100%;
//     height  : 100%;
//     position: relative;

//     display: flex;
// }

// .show {
//     flex  : auto;
//     height: 100%;

//     &::after {
//         width     : 100%;
//         height    : 100%;
//         position  : absolute;
//         top       : 0px;
//         left      : 0px;
//         background: rgba(0, 0, 0, 0.7);
//         content   : "";
//     }

// }

// .main {

//     flex           : none;
//     z-index        : 2;
//     height         : 100%;
//     padding        : 30px;
//     box-sizing     : border-box;
//     z-index        : 1;
//     background     : #fff;
//     display        : flex;
//     justify-content: center;
//     align-items    : center;
//     padding:0px 50px;

//     .box {
//         width          : 360px;
//     }

//     .form {
//         width   : 100%;
//         position: relative;
//         z-index : 1;

//         //background-color: hsla(0,0%,96%,.88);
//     }

//     .wrap {
//         border-radius   : 10px;
//         // padding      : 10px 15px;

//         height: 350px;
//     }

//     .sub {
//         padding: 10px 0px;
//     }

//     .t2 {
//         width         : 100%;
//         line-height   : 30px;
//         padding-bottom: 30px;
//     }

//     .biao {
//         position       : absolute;
//         bottom         : 0px;
//         left           : 0px;
//         width          : 100%;
//         display        : flex;
//         flex-direction : row;
//         flex-wrap      : wrap;
//         justify-content: center;
//         align-items    : center;
//         height         : 50px;
//         opacity        : .5;
//         font-size      : 14px;

//         a {
//             margin-left    : 20px;
//             text-decoration: underline;
//         }
//     }
// }
